<template>
  <div>
    <h2>基本信息</h2>
    <el-form
      :model="lesson"
      ref="form"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="课程" prop="section_id" size="medium">
        <el-col :span="10">
          <el-input v-model="course_name" :disabled="true"> </el-input>
        </el-col>
        <el-col :span="10">
          <el-input v-model="addLessonForm.section_id"> </el-input>
        </el-col>
      </el-form-item>

      <el-form-item label="课时名称" size="medium" prop="theme">
        <el-col :span="20">
          <el-input v-model="addLessonForm.theme"> </el-input>
        </el-col>
      </el-form-item>

      <el-form-item label="时长" prop="duration" size="medium">
        <el-col :span="10">
          <el-input v-model="addLessonForm.duration"> </el-input>
        </el-col>
        <el-col :span="5">
          <el-input placeholder="请输入数字,单位:分钟" :disabled="true">
          </el-input>
        </el-col>
      </el-form-item>

      <!-- v-for="(item, index) in Object.keys(statusMapping)"
              :key="index"
              :label="statusMapping[item]"
              :value="item" -->

      <el-form-item label="是否开放试听">
        <el-radio-group v-model="addLessonForm.is_free">
          <el-radio :label="1">否</el-radio>
          <el-radio :label="0">是</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="课时排序" prop="orderNum" size="medium">
        <el-col :span="10">
          <el-input v-model="addLessonForm.orderNum"> </el-input>
        </el-col>
        <el-col :span="6">
          <el-input
            placeholder="请输入数字,数字越大,排在越后面"
            :disabled="true"
          >
          </el-input>
        </el-col>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="handleAddLesson">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { axios } from "@/utils";
export default {
  data() {
    //定义课时信息
    const addLessonForm = {
      course_id: 0,
      section_id: 0,
      theme: '',
      duration: 0,
      is_free: 0,
      orderNum: 0
    };
    return {
      addLessonForm,
      lesson: {},
      loading: false,
      params: {},
      course_name: "",
      lesson:{}
    };
  },
  created() {
    //1.显示当前页面在网站中的位置
    const { courseId, sectionId } = this.$route.params;
    this.addLessonForm = {
      course_id: courseId,
      section_id:sectionId
    };
    
    console.log(sectionId)
    this.$breadcrumbs = [
      { name: "Courses", text: "课程管理" },
      { name: "CourseTasks", params: { courseId }, text: "课程结构" },
      { text: "课时配置" }
    ];

    //3.加载课程信息
    this.loadCourse(courseId);

    if(sectionId !== "new"){
      const { data } =  this.$route.params;
      console.log(data)
      this.loadLesson(data)
    }
    
  },
  methods: {
    //加载所在的课程名称
    loadCourse(courseId) {
      axios
        .get("/courseContent", {
          params: {
            methodName: "findCourseById",
            course_id: courseId
          }
        })
        .then(res => {
          //将数据保存赋值为表单中
          this.course_name = res.data.course_name;
        })
        .catch(error => {
          this.$message.error("数据获取失败! ! !");
        });
    },
    handleAddLesson() {
      axios
        .post("/courseContent", {
          methodName: "saveOrUpdateLesson",
          lesson: this.addLessonForm
        })
        .then(resp => {
          if (resp.data.status == 0) {
              //保存成功,跳转到首页
              this.$router.back();
            } else if (resp.data.status == 1) {
              this.$message({
                type: "error",
                message: res.data.msg
              });
            }
        })
        .catch(error => {
          this.$message.error("操作执行失败! ! !");
        });
    },
    //修改课时的回显操作
    loadLesson(data){
      console.log(data)
      this.addLessonForm = data
      console.log(data.section_id)
      console.log(this.addLessonForm)

    }

    },
    redirectToError() {
      // TODO: Error components
      this.$router.replace({ path: "/not-found" });
    }
  }

</script>
